<template>
    <div>
        用户名称：<el-input v-model="resform.name"></el-input>
        角色id：<el-input v-model="resform.role"></el-input>
        <select v-model="resform.role">
            <option :value="i.id" v-for="i in reslist" :key="i.id">{{ i.name }}</option>
        </select>
        <el-button @click="submit">提交</el-button>
    </div>
    <div>
        <table style="width: 600px " border=1px>
            <tr>
                <th>name</th>
                <th>role</th>
            </tr>
            <tr v-for="i in reslist1" :key="i.id">
                <td>{{ i.name }}</td>
                <td>{{ i.role }}</td>
            </tr>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import http from '../../http'
const reslist = ref([])
const reslist1 = ref([])
const resform = ref({ 'name': '', 'role': '' })
const submit = () => {
    http.post('users/', resform.value).then(res => {
        if (res.data.code == 200) {
            alert('提交成功')
            location.reload()
        }
    })
}
const getreslist = () => {
    http.get('roles/').then(res => {
        if (res.data.code == 200) {
            reslist.value = res.data.data
        }
    })
}
const getreslist1 = () => {
    http.get('users/').then(res => {
        if (res.data.code == 200) {
            reslist1.value = res.data.data
        }
    })
}
onMounted(() => {
    getreslist()
    getreslist1()
})
</script>